<template>
  <view class="elevtor-info" :style="isElevatorId?'height:calc(100vh - 400rpx)':''" >
    <!-- #ifndef H5 -->
    <block v-if="!isElevatorId">
      <global-nav-bar @setHeight="setHeight" left-icon="back" title="电梯信息" :fixed="false" backgroundColor="#2C2C2C"
        color="#fff"></global-nav-bar>
      <view style="position: fixed; z-index: 3000; width: 100%"></view>
    </block>
    <!-- #endif -->

    <view class="tips" v-if="!info.isFull && closeFlag">
      <view class="tips_text">
        <image src="@/static/images/tips.png"></image>
        <text>设备信息未完善，请及时补充或纠正信息</text>
      </view>
      <image src="@/static/images/close2.png" class="close" @click="close"></image>
    </view>
    <view class="content">
      <view class="content-header" v-if="!isElevatorId">
        <view class="content-header-title" style="height: fit-content; width: fit-content">
          {{ info.buildingName + info.elevatorAddress || null }}</view>
        <view class="content-header-address">{{
          info.buildingAddress || null
        }}</view>
      </view>
      <view class="form-content" style="margin-top: 28rpx">
        <view class="form-item">
          <view class="left">设备品种</view>
          <view class="right" @click="openDriveMode">
            <view v-if="info.driveModeName">{{
              !info.driveModeName ? "" : info.driveModeName
            }}</view>
            <view v-else><text style="color: #ccc">请选择设备品种</text></view>
          </view>
        </view>
        <view class="form-item">
          <view class="left">电梯年检类型</view>
          <view class="right">
            <view v-if="info.useType || info.useType == 0" style="color: #999;">{{
              ["年审梯", "非年审梯"][info.useType]
            }}</view>
            <view v-else><text style="color: #ccc">请选择年审梯或者非年审梯</text></view>
            <!-- <uni-icons color="#999" size="14" type="arrowright" /> -->
          </view>
        </view>
        <view class="form-item">
          <view class="left">启用时间</view>
          <view class="right" @click="openDateSelect">
            <view v-if="info.startDate">{{getMadeDate(info.startDate)}}</view>
            <view v-else><text style="color: #ccc">请选择启用时间</text></view>
            <uni-icons color="#999" size="14" type="arrowright" />
          </view>
        </view>
        <!-- <picker
          mode="date"
          :value="info.startDate"
          fields="month"
          @change="changeMadeDate"
        >
          <view class="form-item noBorder" style="height: 118rpx">
            <view class="left">
              原来启用时间
              <image
                src="/static/images/tips.png"
                v-if="!info.startDate"
              ></image>
            </view>
            <view class="right" @click="openDateSelect" v-if="info.startDate">
              {{ info.startDate ? getMadeDate(info.startDate) : "" }}</view
            >
            <view v-else><text style="color: #ccc">请选择启用时间</text></view>
          </view>
        </picker> -->
      </view>
      <view class="form-content">
        <view class="form-item">
          <view class="left">
            额定速度
            <image src="/static/images/tips.png" v-if="!info.speed"></image>
          </view>
          <view class="right">
            <input type="number" :disabled="inputDisable" v-model="info.speed" @input="getSpeed" />
            <text class="unit" v-if="info.speed">m/s</text>
            <view v-else style="width: 100%; text-align: right"><text
                style="color: #ccc; width: fit-content">请输入额定速度</text></view>
          </view>
        </view>
        <view class="form-item">
          <view class="left">
            额定重量
            <image src="/static/images/tips.png" v-if="!info.supportingPower"></image>
          </view>
          <view class="right">
            <input type="number" :disabled="inputDisable" v-model="info.supportingPower" maxlength="4"
              @input="resetPower" />
            <text class="unit" v-if="info.supportingPower">kg</text>
            <view v-else style="width: 100%; text-align: right"><text
                style="color: #ccc; width: fit-content">请输入额定重量</text></view>
          </view>
        </view>

        <view class="form-item" @click="showDoor">
          <view class="left">层站门</view>
          <view class="right">
            <view v-if="info.floorHigh && info.stand && info.door">
              {{ info.floorHigh + "/" + info.stand + "/" + info.door }}</view>
            <view v-else><text style="color: #ccc">请选择</text></view>
            <uni-icons color="#999" size="14" type="arrowright" />
          </view>
        </view>
        <view class="form-item noBorder">
          <view class="left">
            提升高度
            <image src="/static/images/tips.png" v-if="!info.hoistHeight"></image>
          </view>
          <view class="right"><input :disabled="inputDisable" type="number" v-model="info.hoistHeight"
              placeholder="请输入提升高度" placeholder-style="color:#ccc" maxlength="20" /></view>
        </view>
      </view>
      <view class="form-content">
        <view class="form-item">
          <view class="left">
            设备代码
            <image src="/static/images/tips.png" v-if="!info.privateNum || !info.privateNumIsFull">
            </image>
          </view>
          <view class="right"><input :disabled="inputDisable" placeholder="请输入设备代码" v-model="info.privateNum"
              maxlength="20" placeholder-style="color:#ccc" @input="changePrivateNum" /></view>
        </view>
        <view class="form-item">
          <view class="left">
            登记证编码
            <image src="/static/images/tips.png" v-if="!info.equipmentRegisterNumber"></image>
          </view>
          <view class="right"><input :disabled="inputDisable" type="text" placeholder="请输入登记证编码"
              placeholder-style="color:#ccc" v-model="info.equipmentRegisterNumber" maxlength="20" /></view>
        </view>
        <view class="form-item">
          <view class="left">
            单位内编码
            <image src="/static/images/tips.png" v-if="!info.registerNumber"></image>
          </view>
          <view class="right"><input :disabled="inputDisable" type="text" v-model="info.registerNumber"
              placeholder="请输入单位内编码" placeholder-style="color:#ccc" maxlength="20" /></view>
        </view>
        <view class="form-item">
          <view class="left">
            登记机关
            <image src="/static/images/tips.png" v-if="!info.registrationAuthority"></image>
          </view>
          <view class="right"><input :disabled="inputDisable" type="text" v-model="info.registrationAuthority"
              placeholder="请输入登记机关" placeholder-style="color:#ccc" maxlength="20" /></view>
        </view>
        <view class="form-item noBorder">
          <view class="left">
            检验机构
            <image src="/static/images/tips.png" v-if="!info.certificationBody"></image>
          </view>
          <view class="right"><input :disabled="inputDisable" type="text" v-model="info.certificationBody"
              placeholder="请输入检验机构" placeholder-style="color:#ccc" maxlength="20" /></view>
        </view>
      </view>
      <!-- <view class="form-content" style="margin-top: 28rpx">
        <view class="form-item">
          <view class="left">
            年检日期
            <image
              src="/static/images/tips.png"
              v-if="!info.elevatorAudit"
            ></image>
          </view>
          <view class="right"
            ><input
              type="text"
              :disabled="true"
              v-model="info.elevatorAudit"
              maxlength="20"
          /></view>
        </view>
      </view> -->

      <view class="form-content">
        <view class="form-item">
          <view class="left">
            <view>电梯品牌</view>
            <image src="/static/images/tips.png" v-if="!info.brandName"></image>
          </view>
          <view class="right" @click="showBrand">
            <view v-if="info.brandName && info.brandName !== null">{{
              info.brandName
            }}</view>
            <view v-else><text style="color: #ccc">请选择</text></view>
            <uni-icons color="#999" size="14" type="arrowright" />
          </view>
        </view>

        <view class="form-item">
          <view class="left">
            生产工号
            <image src="/static/images/tips.png" v-if="!info.manufactureNo"></image>
          </view>
          <view class="right"><input :disabled="inputDisable" type="text" v-model="info.manufactureNo"
              placeholder="请输入生产工号" placeholder-style="color:#ccc" maxlength="20" /></view>
        </view>

        <view class="form-item">
          <view class="left">
            出厂编号
            <image src="/static/images/tips.png" v-if="!info.factoryNumber"></image>
          </view>
          <view class="right"><input :disabled="inputDisable" type="text" v-model="info.factoryNumber"
              placeholder-style="color:#ccc" placeholder="请输入出厂编号" /></view>
        </view>
        <view class="form-item noBorder">
          <view class="left">
            合格证号
            <image src="/static/images/tips.png" v-if="!info.certNo"></image>
          </view>
          <view class="right"><input :disabled="inputDisable" type="text" v-model="info.certNo" placeholder="请输入合格证号"
              placeholder-style="color:#ccc" maxlength="20" /></view>
        </view>
      </view>
      <view class="form-content">
        <view class="form-item" style="border: none">
          <view class="left">
            安全管理员
            <image src="/static/images/tips.png" v-if="!info.securityGuardName"></image>
          </view>
          <view class="right"><input :disabled="inputDisable" type="text" v-model="info.securityGuardName"
              placeholder-style="color:#ccc" placeholder="请输入安全管理员" /></view>
        </view>
      </view>
      <view class="save" @click="handleSave">
        <view :style="disabled ? 'background:#bbc2c7' : ''">保存</view>
      </view>
    </view>
    <!-- 品牌弹出框 -->
    <uni-popup ref="popup" type="bottom" @activeInput="activeInput">
      <select-picker :list="[brandList]" @close="handleClose" :mask-click="false" :active="brandActive">
      </select-picker>
    </uni-popup>
    <!-- 层站门弹出框 -->
    <uni-popup ref="popup2" type="bottom" @activeInput="activeInput">
      <select-picker :list="[doorList, doorList, doorList]" :title="['层', '站', '门']" @close="handleCloseDoor"
        :mask-click="false" :active="floorActive" :type="2"></select-picker>
    </uni-popup>
    <!-- 驱动方式弹出框 -->
    <uni-popup ref="popup3" type="bottom" @activeInput="activeInput">
      <select-picker :list="[driveModeList]" @close="handleCloseDriveMode" :mask-click="false" :active="DriveActive"
        :type="3"></select-picker>
    </uni-popup>
    <!-- 电梯年检类型弹出框 -->
    <uni-popup ref="elevtorUse" type="bottom" @activeInput="activeInput">
      <select-picker :list="[['年审梯', '非年审梯']]" @close="handleCloseElevtorUse" :mask-click="false" :type="3"
        :active="elevtorUseActive"></select-picker>
    </uni-popup>
    <!-- 启用时间弹出框 -->
    <uni-popup ref="startTime" type="bottom" @activeInput="activeInput" @maskClick="maskClick">
      <select-picker :list="[yearList, monthList]" @close="handleCloseDate" :mask-click="false" :type="3"
        :active="startTimeActive" @bindChange="bindChange"></select-picker>
    </uni-popup>
  </view>
</template>

<script>
import unipopup from '@/components/uni-popup/uni-popup';
import SelectPicker from './components/select-piker.vue';
import GlobalNavBar from '@/components/uni-nav-bar/global-nav-bar';
import {
	elevtorDetail,
	getBrand,
	getDriveMode,
	update,
} from '@/apis/elevator.js';
import { location } from '@/apis/maintains.js';
// import duNav from '@/components/nav-box/nav-box.vue';
export default {
	components: {
		unipopup,
		SelectPicker,
		GlobalNavBar
		// duNav
	},
	data() {
		return {
			mheight: 0,
			info: {
				privateNumIsFull: true,
			},
			driveMode: [],
			disabled: false,
			elevatorUseType: '',
			closeFlag: true,
			doorList: this.getArr(2, 50),
			monthList: this.getArr(1, 12, true),
			yearList: this.getYears(),
			index: 0,
			elevatorId: '',
			brandList: [],
			floorActive: [0, 0, 0],
			brandActive: [0],
			DriveActive: [0],
			elevtorUseActive: [0],
			startTimeActive: [0, 0],
			locationList: [],
			driveModeList: [],
			useType: '',
			startTimeStr: '',
			inputDisable: false,
			startTimeList: [],
			list: [
				{
					name: '品牌',
					key: 'brandName',
					disabled: true,
				},

				{
					name: '设备代码',
					key: 'privateNum',
				},
				{
					name: '设备品种',
					key: 'driveModeName',
					disabled: true,
				},
				{
					name: '额定载重量',
					key: 'supportingPower',
					unit: 'kg',
				},
				{
					name: '额定速度',
					key: 'speed',
					unit: 'm/s',
				},
				{
					name: '层站门',
					key: 'code',
					disabled: true,
				},
				{
					name: '单位内编码',
					key: 'registerNumber',
				},
				{
					name: '登记证编码',
					key: 'equipmentRegisterNumber',
				},
				{
					name: '',
					key: '',
				},
			],
		};
	},
	props:{
		isElevatorId:{//
			type:String,
			default:''
		}
	},
	onLoad(opt) { 
		if (!this.isElevatorId) {
			this.elevatorId = opt.id;
			this.fetchBrand();
			this.getInfo();
		}
	},
	created() {
		// this.getLocation();
		this.getYears();
	},
	mounted() {
		if (this.isElevatorId) {
			this.elevatorId = this.isElevatorId;
			this.fetchBrand();
			this.getInfo();
		}
	},

	methods: {
		setHeight(n) {
			this.mheight = n;
		},
		formatNumber(n) {
			n = n.toString();

			return n[1] ? n : '0' + n;
		},
		disableInput() {
			this.inputDisable = true;
		},
		activeInput() {
			this.inputDisable = false;
		},
		changeMadeDate(res) { 
			this.info.startDate = res.detail.value;
		},
		// 驱动方式弹出框
		openDriveMode() {
			return;
			this.$refs.popup3.open();
			this.disableInput();
		},
		// 电梯用途弹出框
		openElevtorUse() {
			this.$refs.elevtorUse.open();
			this.disableInput();
		},
		// 启用时间弹出框
		openDateSelect() { 
			this.$refs.startTime.open();
			this.disableInput();
			let nowYear = new Date().getFullYear();
			let nowMonth = this.formatNumber(new Date().getMonth() + 1);
			let nowYearIdx = this.yearList.findIndex((item) => item == nowYear);
			let monthIdx = this.monthList.findIndex((item) => item == nowMonth);
			let arr = this.getMadeDate(this.info.startDate).split('-'); 
			if (!this.info.startDate) {
				this.monthList = this.getArr(1,new Date().getMonth() + 1,true);
			}
			if (arr && arr.length > 1 && nowYear == arr[0]) {
				this.monthList = this.getArr(1,new Date().getMonth() + 1,true);
			}
			if (arr && arr.length > 1) {
				let dateYearIdx = this.yearList.findIndex((item) => item == arr[0]);
				let datemonthIdx = this.monthList.findIndex((item) => item == arr[1]);
				this.startTimeActive = [dateYearIdx, datemonthIdx];
			} else {
				this.startTimeActive = [nowYearIdx, monthIdx];
			}
			this.$forceUpdate();
		},
		// 启用时间select
		bindChange(arr) {
			if (arr && arr.length) {
				let curYear = new Date().getFullYear();
				let years = this.yearList[arr[0]];
				if (curYear == years) {
					this.monthList = this.getArr(1,new Date().getMonth() + 1,true);
				} else {
					this.monthList = this.getArr(1,12,true);
				}
				this.$forceUpdate();
			}
		},
		// 关闭启用时间select
		maskClick() {
			this.yearList = this.getYears();
			this.monthList = this.getArr(1,12,true);
			this.$forceUpdate();
		},
		nextCheckTime(val) { 
			let date = new Date(val);
			let month = date.getMonth() + 1;
			let year = date.getFullYear() + 1;
			return year + '/' + (month >= 10 ? month : '0' + month);
		},
		feedback(i, id) { 
		},
		// 正则
		resetPower(e) {
			let val = e.target.value; 
			let reg = new RegExp(/^[0-9]*[1-9][0-9]*$/);
			// let reg='^[0-9]*[1-9][0-9]*$'
			// val = val.replace(reg, '');
			let first = val.indexOf('0');
			if (first == 0) {
				uni.showToast({
					title: '不能以0开头',
					icon: 'none',
				});
				val = val.slice(1, val.length);
			} else if (!reg.test(val)) {
				val = '';
				uni.showToast({
					title: '最多输入4位正整数',
					icon: 'none',
				});
			}
			this.$nextTick(() => {
				this.info.supportingPower = val;
			});
		},
		getMadeDate(val = '') { 
			if (!val) {
				return '';
			}
			let vals = val.replaceAll('-', '/');
			let date = new Date(vals);
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			return year + '-' + (month >= 10 ? month : '0' + month);
		},
		// 检验速度
		getSpeed(e) {
			let val = e.target.value.replace(/(^\s*)|(\s*$)/g, '');
    
			if (!val) {
				this.info.speed = '';
				return;
			}
			var reg = /[^\d.]/g;

			// 只能是数字和小数点，不能是其他输入
			val = val.replace(reg, '');
			// // 保证第一位只能是数字，不能是点
			val = val.replace(/^\./g, '');
			// // 小数只能出现1位
			val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
			// // 小数点后面保留2位
			val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
      
			this.$nextTick(() => {
				this.info.speed = val;
			});
		},
		fetchBrand() {
			getBrand({}).then((res) => {
				this.brandList = res.data;
			});
		},
		getInfo() {
			uni.showLoading({
				title: '加载中',
			});
			elevtorDetail({
				elevatorId: this.elevatorId,
			}).then((res) => {
				uni.hideLoading(); 
				this.info = res.data || {};
        
				this.brandId = !this.info.brandId ? '' : this.info.brandId;
			});
			getDriveMode().then((res) => {
				this.driveMode = res.data; 
				for (let data of res.data) {
					this.driveModeList.push(data.name);
				}
			});
		},
		getArr(start, end, makeUpZaro) {
			makeUpZaro || false;
			// console.log(Array.from(new Array(end + 1).keys()),333);
			let arr = Array.from(new Array(end + 1).keys()).slice(start);
			let newArr = arr.map((item) => {
				return item > 9 ? item : '0' + item;
			});
			// console.log(newArr,"新");
			return makeUpZaro ? newArr : arr;
		},
		// 获取今年启用时间的年份
		getYears() {
			let now = new Date().getFullYear();
			let end = Number(now);
			// let start = Number(now) - 50;
			return this.getArr(1970, end);
		},
		close() {
			// console.log(1223);
			this.closeFlag = false;
		},
		// 选择品牌
		showBrand() {
			this.$refs.popup.open();
			this.disableInput();
			const { brandId } = this.info; 
			const index = this.brandList.findIndex((item, index) => {
				// console.log(item,'item的值')
				return item.id === brandId;
			}); 
			if (index == -1) {
				this.brandActive = [0];
			} else {
				this.brandActive = [index];
			} 
		},
		// 选择层站门
		showDoor() {
			this.$refs.popup2.open();
			this.disableInput();
			const { stand, door, floorHigh } = this.info;
			if (stand && door && floorHigh) {
				this.floorActive = [
					Number(floorHigh) - 2,
					Number(stand) - 2,
					Number(door) - 2,
				]; 
			}
		},
		// 关闭品牌
		handleClose(res) {
			this.activeInput();
			this.$refs.popup.close(); 
			// 如果是品牌
			if (res.type === 1) {
				this.info.brandName = this.brandList[res.index].brandName;
				this.info.brandId = this.brandList[res.index].id; 
			}
		},
		// 关闭层站门
		handleCloseDoor(res) {
			this.activeInput();
			this.$refs.popup2.close();
			this.activeInput();
			// 层站门
			this.info.floorHigh = this.doorList[res[0]];
			this.info.stand = this.doorList[res[1]];
			this.info.door = this.doorList[res[2]];
			this.floorActive = res; 
		},

		// 选择设备品种
		handleCloseDriveMode(res) {
			this.activeInput(); 
			this.$refs.popup3.close();
			this.info.elevatorUseType = this.driveMode[res.index].id;
			this.info.driveModeName = this.driveMode[res.index].name;
		},
		// 选择电梯用途
		handleCloseElevtorUse(res) {
			this.activeInput();
			this.$refs.elevtorUse.close(); 
			this.useType = res.index;
			this.info.useType = res.index;
		},
		// 关闭对话框,选择了启用时间
		handleCloseDate(res) {
			this.activeInput();
			if (res && res.length > 1) {
				this.info.startDate = `${this.yearList[res[0]]}-${this.monthList[res[1]]}-01 00:00:00`;
				this.$refs.startTime.close();
			}
		},
		bindPickerChange(e) { 
			this.info.brand = this.brandList[e.detail.value];
		},
		changeInput(item) {
			// 如果是设备代码20位,自动请求后端获取驱动方式
			if (item.key === 'code') {
				if (this.info.code.length === 3) { 
				}
			}
		},
		strTest(str) {
			// 判断字符串是否为数字和字母组合
			var zg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]*$/;
			if (!zg.test(str)) {
				return false;
			} else {
				return true;
			}
		},
		// 保存
		handleSave() {
			let info = JSON.parse(JSON.stringify(this.info)); 
			if (info.privateNumIsFull) {
				if (info.privateNumIsFull.length > 20) {
					uni.showToast({
						title: '设备代码不能超过20位',
						icon: 'none',
					});
					return;
				}
			} else {
				info.privateNumIsFull = null;
			}
			if (info.startDate) {
				if (info.startDate.length <= 8) {
					info.startDate = info.startDate.replace(/-/g, '');
				} else {
					info.startDate = this.getMadeDate(info.startDate).replace(/-/g, '');
				}
				// delete info.startDate
			}

			if (!this.disabled) {
				this.disabled = true;
				uni.showLoading({
					title: '更新数据中',
					mask: true,
				});

				update(
					this.elevatorId,
					info.brandId
						? {
							...info,
							brandId: info.brandId,
						}
						: info
				).then((res) => { 
					if (res) {
						setTimeout(() => {
							uni.showToast({
								title: '更新成功',
								icon: 'none',
							});
							this.disabled = false;
						}, 500);
						this.getInfo();
					}
				});
				setTimeout(() => {
					this.disabled = false;
				}, 3000);
			} else {
				setTimeout(() => {
					uni.showToast({
						title: '正在更新，请稍后',
						icon: 'none',
					});
				}, 500);
			}
		},
		// 判断输入是否20位
		changePrivateNum(val) {
			// console.log(val.target.value)
			let res = val.target.value;
			var patt1 = new RegExp('^[A-Za-z0-9]+$');
   
			if (patt1.test(res)) {
				this.info.privateNumIsFull = true;
			} else {
				this.info.privateNumIsFull = false;
			}
			// if (res.length === 20) {
			// 	this.info.privateNumIsFull = true
			// }
		},
	},
	computed: {
		showTips() {
			const temp = [];
			let flag = true;
			this.list.map((item, index) => {
				if (!this.info[item.key]) {
					temp.push(item);
				}
			});
			return (flag = temp.length ? true : false);
		},
		// brandInx() {
		// 	// debugger
		// 	if(!this.brandList.length){
		// 		return 0
		// 	}else{
		// 		let temp=0
		// 		console.log(this.brandId,'this.brandId')
		// 		 if(!this.brandId){
		// 			 return temp=0
		// 		 }else{
		// 			 return this.brandList.findIndex((item,index)=>{
		// 				 item.id===this.brandId
		// 			 })
		// 		 }
		// 	}

		// }
	},
};
</script>
<style></style>
<style lang="scss">
page {
  height: 100%;
  background-color: #f3f6f8;
}

uni-picker .uni-picker-action.uni-picker-action-confirm {
  color: #57dbd0 !important;
}

.elevtor-info {
  font-size: 28rpx;
  background-color: #f3f6f8;
  height: calc(100vh - 84rpx);
  overflow-y: auto;
  overflow-x: hidden;

  .tips {
    color: #ff7505;

    .tips_text {
      display: flex;
      align-items: center;
    }

    display: flex;
    padding: 0 20rpx;
    justify-content: space-between;
    background: #fffadf;
    height: 80rpx;
    align-items: center;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 8rpx;
    }

    .close {
      padding: 30rpx 0 30rpx 30rpx;
    }
  }

  .content {
    display: flex;
    justify-content: center;
    // height: 1082rpx;
    flex-direction: column;
    align-items: center;
    padding-bottom: 40rpx;

    &-header {
      width: 710rpx;

      &-title {
        width: 414rpx;
        height: 58rpx;
        font-size: 42rpx;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #333333;
        line-height: 58rpx;
        text-align: left;
        margin: 32rpx 0 0 0;
      }

      &-address {
        width: fit-content;
        height: 34rpx;
        font-size: 24rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #999999;
        line-height: 34rpx;
      }
    }

    .title {
      display: flex;
      height: 110rpx;

      view {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
      }
    }

    .form-content {
      width: 710rpx;
      box-sizing: border-box;
      background: #fff;
      margin: 0rpx 0 20rpx 0;
      padding: 0 20rpx;
      border-radius: 8rpx;

      .form-item {
        display: flex;
        justify-content: space-between;
        align-items: center;

        border-bottom: 2rpx solid #e9e9e9;

        .unit {
          margin-left: 4rpx;
        }

        .left {
          font-size: 28rpx;
          color: #999;
          width: 200rpx;
          display: flex;
          align-items: center;

          image {
            width: 28rpx;
            height: 28rpx;
            margin-left: 10rpx;
          }
        }

        .right {
          height: 118rpx;
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: flex-end;

          view:nth-child(1) {
            display: flex;
            height: 100%;
            align-items: center;
          }

          input {
            text-align: right;
            width: 100%;
          }

          text {
            color: #999;
          }
        }
      }
    }

    .noBorder {
      border: none !important;
    }
  }

  .save {
    background-color: #fff;
    padding: 14rpx;
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    bottom: 10rpx;

    /* #ifdef H5 */
    padding-bottom: constant(safe-area-inset-bottom);  
    padding-bottom: env(safe-area-inset-bottom);  
    /* #endif */

    view {
      height: 70rpx;
      background: #0091ff;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
  }
}
</style>
